@import '~@/scss/GlobalVariables';

// Colors
$color-white: $white;
$color-red: $red-5;
$color-blue: $light-blue-1;
$color-green: $mew-green;
$form-background: $light-grey-1;
$input-title-color: #212529;

$button-color: $mew-green;
$button-hover-color: #00947f;
$text-info-color: #212529;

//=======================================================================
// Common Style
//=======================================================================

.standard-input {
  width: 100%;
}

.input-title-container {
  display: flex;
  align-items: flex-end;
  padding: 0 10px;
  margin-bottom: 10px;
}

.input-title-and-helper {
  display: flex;
  align-items: center;
  user-select: none;

  .title-and-subtitle {
    display: flex;
    align-items: center;

    @media all and (max-width: $tablet-width) {
      display: block;
    }
  }
}

.input-title {
  font-weight: 600;
  font-size: 16px;
  line-height: initial;
  margin-right: 8px;
  color: $input-title-color;
}

.input-title-text {
  margin-right: 8px;
}

.the-button-container {
  margin-left: auto;
  display: flex;
  align-items: center;

  > div {
    margin-left: 20px;
    font-size: 13px;
  }

  .the-button {
    user-select: none;
    color: $button-color;
    cursor: pointer;

    i {
      margin-right: 8px;
      transform: rotate(90deg);
    }

    &:hover {
      color: $button-hover-color;
    }
  }

  .the-text {
    color: $text-info-color;
  }
}

.input-container {
  position: relative;

  input {
    font-size: 14px;
    padding: 17px 20px;
    border: 1px solid $form-background;
    background-color: $form-background;
    width: 100%;
    position: relative;
    display: block;

    &.disabled {
      background-color: $light-green-4;
    }

    &.right-padding {
      padding-right: 70px;
    }
  }

  .right-input-text {
    pointer-events: none;
    user-select: none;
    position: absolute;
    top: 18px;
    right: 21px;
    color: $color-green;
  }

  textarea {
    font-size: 14px;
    padding: 18px 20px;
    border: 0;
    background-color: $form-background;
    width: 100%;
    height: 150px;
    resize: none;
  }
}

.input-container.border-grey input {
  border: 1px solid $light-green-6;
}

.input-container.border-red input {
  border: 1px solid $color-red;
}

.input-container.border-blue input {
  border: 1px solid $color-blue;
}

.input-container.border-green input {
  border: 1px solid $color-green;
}

.password-strength-indicator {
  .strength {
    font-weight: 600;
    margin-top: 10px;
  }

  .note {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
  }

  .weak {
    color: $color-red;
  }
  .medium {
    color: $color-blue;
  }
  .strong {
    color: $color-green;
  }
}

@mixin btn-mixin-1() {
  text-align: center;
  user-select: none;
}

@mixin btn-mixin-2() {
  padding: 18px 45px;
  font-weight: 500;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  position: relative;
  min-width: 250px;
}
